<template>
	<view class="bindingGuide" :style="{background: 'url('+imageURL+')'}">
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#fff" size="50"></u-icon>
			<text>绑定指南</text>
		</view>
		<view class="section">
			<view class="title">
				设备与手机绑定
			</view>
			<view class="change"></view>
			<view class="guideTitle">
				<view class="yellow"></view>
				<text style="font-size: 36rpx;color: #445CDF;font-weight: bold;">扫码绑定</text>
				<view style="margin: 40rpx;margin-top: 20rpx;color: #666;margin-bottom: 0;">
					登录系统后，点击【绑定】选择【扫码绑定】，进入扫码页面。扫码设备面板上的二维码进行绑定。
				</view>
			</view>
			<view class="guideTitle">
				<view class="yellow"></view>
				<text style="font-size: 36rpx;color: #445CDF;font-weight: bold;">主管理员邀请绑定</text>
				<view style="margin: 40rpx;margin-top: 20rpx;color: #666;  text-align: justify;">				
				登录系统后，点击【绑定】选择【主管理员绑定】，填写手机号，获取验证码，绑定成功。
				</view>
				<view style="margin: 40rpx;margin-top: 0rpx;color: #666;  text-align: justify;">
				登录系统后，点击【绑定】选择【主管理员绑定】，填写手机号，获取验证码，绑定成功。登录系统后，点击【绑定】选择【主管理员绑定】，填写手机号，获取验证码，绑定成功。
				</view>
				<view style="margin: 40rpx;margin-top: 0rpx;color: #666;  text-align: justify;">				
				登录系统后，点击【绑定】选择【主管理员绑定】，填写手机号，获取验证码，绑定成功。
				</view>
				<view style="margin: 40rpx;margin-top: 0rpx;color: #666;  text-align: justify;">				
				登录系统后，点击【绑定】选择【主管理员绑定】，填写手机号，获取验证码，绑定成功。
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '../../../static/images/bindingGuide.jpg'
			}
		},
		methods: {
			navigateBack() {
				wx.reLaunch({
					url:'./binding'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bindingGuide{
		background-size: 100% 100%;padding-bottom: 300rpx;
	}
	// 头部
	.navbar{padding-top: 90rpx;padding-bottom: 80rpx;width: 750rpx;}
	.navbar > text{font-size: 36rpx;font-weight: bold;padding-left: 220rpx;color: #fff;}
	.icon-left{margin-top: 20rpx;margin-left: 10rpx;}
	// 内容
	.section{margin: 30rpx;border-radius: 30rpx;background-color: #fff;padding: 50rpx;}
	// 内容标题
	.title{font-size: 40rpx;color: #0D2293;text-align: center;font-weight: bold;}
	// 渐变线
	.change{margin-top: 20rpx;height: 2rpx;background-image: linear-gradient(to right, #fff,#0B1E87, #0B1E87,#fff);opacity: 0.35;}
	// 
	.guideTitle{padding-top: 50rpx;}
	// 黄
	.yellow{width: 20rpx;height: 20rpx;background-color: #FFD71A;display: inline-block;margin-right: 20rpx;}
</style>
